<template>
    <div class="wrapper" :class="{color2:this.cartShow}">
      
        <div class="top" >
            <img src="../assets/小于号.png" class="img" @click="fan">
            <div class="search">
                <img src="../assets/搜索.png">
                <p class="search-title">请输入商品名称搜索</p>
            </div>
        </div>
        
       
      <div class="card"  v-for="item in sales" :key="item.id">
            <div class="cardImg"><img :src="item.img"></div>
            <div class="info">
                <span class="cardName">{{item.name}}</span>
                <div class="info-price">
                <span class="yue">月售{{item.sale}}</span>
                <span class="first">起送￥{{item.qisong}}</span>
                <span class="price">基础运费￥{{item.basePrice}}</span>
                </div>
                <span class="quan">{{item.info}}</span>
                <div class="hr"></div>
            </div>
      </div>     

        <div class="middle">
                <div class="left">
                    <span class="leftName" v-for="(item,index) in left" @click="change(index)" :class="{active:index==num}">{{item}}</span>
                </div>

              
                 <div class="right" >
                    <div class="cardGoods" v-for="(thing,index) in goods[this.num]">
                        <div class="cardImg1">
                            <img :src="thing.img" class="img">
                        </div>
                        <div class="cardContent">
                            <span class="goodsName">{{thing.goodsName}}</span>
                            <span class="goodsNumber">月售{{thing.goodsNumber}}件</span>
                            <div class="price">
                                <span class="price1"><span>￥</span>{{thing.price}}<s>￥{{thing.oldPrice}}</s></span>
                                <img src="../assets/减少.png" class="jian" @click="jian(index)" v-show="thing.amount!=0">
                                <span class="number" v-show="thing.amount!=0">{{thing.amount}}</span>
                                <img src="../assets/加.png" class="jia" @click="jia(index)">
                            </div>
                        </div>
                    </div>
                    <div style="height:8vh"></div>
                </div>
               
        </div>
       
    </div>
     <div class="bottom1">
            <cartGoods></cartGoods>
            <div class="bottom">
                <img src="../assets/菜篮子.png" @click="cart()">
                <span class="amount">{{this.amount1}}</span>
                <span class="text">总计：</span>
                <span class="total">￥{{this.total}}</span>
                <span class="text2" :class="{text21:this.amount1===0}" @click="account()">去结算</span>
            </div>
        </div>
</template>

<script>
 import {mapState,mapGetters,mapMutations} from 'vuex'
import cartGoods from '@/components/cartGoods.vue'

export default{
    name: 'SaleInfo',
        components: {
            cartGoods
        },
    data(){
      return {
        id:this.$route.params.id,
       left:['全部商品','秒杀','新鲜水果','休闲食品','时令蔬菜','肉蛋家禽'],
       goods:[],
       num:0
      }
    },
    created(){
        this.goods.push(this.goods0);
        this.goods.push(this.goods1);
        this.goods.push(this.goods2);
        this.goods.push(this.goods3);
        this.goods.push(this.goods4);
        this.goods.push(this.goods5);
       console.log(this.$store.state.sales)
    },
    computed:{
      ...mapState(['saleInfo','sales','amount1','total','cartShow','dizhi']), 
      ...mapGetters(['Info','goods1','goods2','goods3','goods4','goods5','goods0','amount']) ,
    //   total(){
    //     return this.goods.filter(item=>item.isSelect).reduce((total,item)=>{
    //         return total += item.price*item.amount
    //     })
    //   }
    },
    
    methods:{
        ...mapMutations(['jia','jian','tatal','showGoods']),
      change(key){
          this.num=key;
        //   console.log(this.num)
      },
        cart(){
            this.showGoods();
        },
        account(){
            if(this.total===0){
                alert("购物车商品为0！")
            }else{
                this.$router.push("/isOrder");
                this.$store.state.dizhi='设置收货地址';
                // console.log(this.$store.state.dizhi)
            }
        },
        fan(){
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.color2{
    position:fixed;
    
}
    .wrapper{
        min-height:100vh;
        background-color:#f1f1ee;
        width:100vw;
    }
    .middle{
        display:flex;
        min-height: 68vh;
    }
    .top{
        background-color:white;
        display:flex;
        padding:3vw;
        .img{
            width: 6vw;
            height: 8vw;
            margin-top: 1vw;
        }
    }
    .search{
        margin-left: 3vw;
        background-color: #f5f5f4;
        height: 10vw;
        border-radius: 5vw;
        width: 84vw;
        img{
        width: 6vw;
        height: 6vw;
        padding: 2vw;
        margin-left: 2vw;
        }
        p{
        margin-left: 13vw;
        margin-top: -9vw;
        }
    }
    .card{
        padding-top:3vw;
        background-color:white;
        display:flex;
        .cardImg{
        width:15vw;
        margin-left: 3vw;
        img{
            width: 15vw;
            height: 15vw;
        }
        }
        .info{
        margin-left: 4vw;
        display:flex;
        flex-direction:column;
        margin-bottom:2vw;
        .cardName{
            font-size: 4.5vw;
            margin-bottom:2vw;
        }
        .info-price{
            margin-bottom:2vw;
            font-size: 3.5vw;
            display:flex;
            .yue{
            margin-right:5vw;
            }
            .first{
            margin-right:5vw;
            }
        }
        .quan{
            color: red;
            font-size: 4vw;
            margin-bottom:2vw;
        }
        }
    }
    .left{
        display:flex;
        flex-direction:column;
        .leftName{
            padding: 3vw;
            width: 18vw;
            text-align: center;
        }
        .active{
            background-color:white
        }
    }
    .right{
        background-color:white;
        display:flex;
        flex-direction:column;
        .cardGoods{
            display:flex;
            margin-left: 3vw;
            margin-bottom:3vw;
            .cardImg1{
                
                img{
                    width:20vw;
                    height:20vw;
                    margin-right: 3vw;
                }
            }
            .cardContent{
                display:flex;
                flex-direction:column;
                .goodsName{
                    font-size: 4.5vw;
                    margin-bottom: 2vw;
                    font-weight: 545;
                }
                .goodsNumber{
                    font-size: 3.5vw;
                    margin-bottom: 2vw;
                }
                .price{
                    display:flex;
                    width: 50vw;
                    justify-content: space-between;
                    s{
                        color: #ccc;
                        margin-left: 1vw;
                        font-size: 3vw;
                    }
                    .price1{
                        color:red;
                        font-size:4.5vw;
                        span{
                            font-size:2vw;
                        }
                    }
                    .number{
                        line-height:5vw;
                    }
                    .jia{
                        width: 6vw;
                        height: 6vw;
                        margin: -1vw 3vw 0 1vw;
                    }
                    .jian{
                        width: 6vw;
                        height: 6vw;
                        margin: -1vw 1vw 0 5.9vw;
                    }
                }
            }
        }
    }
    .bottom1{
      
    }
    .bottom{
        border-top: 0.1vw solid #ccc;
        display:flex;
        height: 8vh;
        background-color:white;
        align-items: center;
        position: fixed;
        bottom: 0;
        .amount{
            color: white;
            background-color: red;
            height: 4vw;
            text-align: center;
            font-size: 1vw;
            border-radius: 2vw;
            width: 4vw;
            margin-top: -8vw;
            margin-left: -2vw;
        }
        img{
            width:10vw;
            height:10vw;
            margin-left: 8vw;
        }
        .text{
            margin-left: 8vw;
            width: 14vw;
        }
        .total{
            font-size:5vw;
            color:red;
            width: 28vw;
        }
        .text2{
            background-color: #1296db;
            width: 30vw;
            color: white;
            height: 8vh;
            text-align: center;
            line-height: 8vh;
        }
        .text21{
            background-color:#50c7fbc4
        }
    }
</style>